<template>
    <fieldset>
        <legend>reactive</legend>
        <h1>
            {{ msg }}
        </h1>
        <h1>
            {{ ob }}
        </h1>
        <h1>
            {{ ob2 }}
        </h1>
        <h1>{{ num }}</h1>
        <h2>
            {{str}}
        </h2>
    </fieldset>
</template>
<script setup>
//编写vue3业务掌握的api ref computed onMounted watch 
import { ref, reactive } from "vue"
//reactive的作用,将对象变成响应式,不能响应简单数据类型
//ref难道不能变成响应式对象嘛?可以
let msg = ref("初始值")
//ref也可以将对象变成响应形式
let ob = ref({ name: "李雷" })

//reactive包装的数据,修改的时候不需要点value
let ob2 = reactive({ name: "韩梅梅 " })
//修改ref和修改reactive
// setTimeout(() => {
//     //修改ref,需要.value
//     ob.value.name = 'ikun'
//     //修改reactive,不需要.value
//     ob2.name = '麒麟臂'
// }, 2000)

let num = reactive(30)
let str = ref('李雷123')
setTimeout(() => {
    // num = 40
    str.value = '霍华德'
}, 2000)

//总结:
//1.ref修改的时候需要.value reactive不需要
//2.reactive只能响应对象,ref基本数据类型和对象都能响应
</script>